<div id="<%= dom_id(card, :tags) %>" class="card__tags">
  <div class="position-relative" data-controller="dialog"
        data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
    <button class="tag-picker__button btn card__hide-on-index" style="--btn-background: var(--card-bg-color);"
        data-controller="tooltip hotkey" data-action="click->dialog#open:stop keydown.t@document->hotkey#click">
      <%= icon_tag "tag" %>
      <span class="for-screen-reader">Add a tag</span>
    </button>

    <dialog class="popup panel flex-column align-start justify-start fill-white shadow txt-small"
        data-dialog-target="dialog"
        data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing turbo:submit-end->dialog#close">
      <%= turbo_frame_tag card, :tagging, src: new_card_tagging_path(card), loading: :lazy, refresh: :morph %>
    </dialog>
  </div>

  <% if card.tags.any? %>
    <div class="min-width overflow-ellipsis">
      <% card.tags.each_with_index do |tag, index| %>
        <%= link_to cards_path(board_ids: [ card.board ], tag_ids: [ tag.id ]),
              class: "card__tag btn btn--plain min-width txt-uppercase fill-transparent" do %>
          <%= tag.title %>
        <% end %><%= "," unless index == card.tags.size - 1 %>
      <% end %>
    </div>
  <% end %>
</div>
